<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入姓名" clearable v-model="name" @clear="getManagerList">
            <el-button slot="append" icon="el-icon-search" @click="getManagerList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加管理员</el-button>
        </el-col>
      </el-row>
      <el-table :data="managerList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="手机号" prop="cellphone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">{{getRoleNames(scope.row.roleList)}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeUserById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[6, 10 , 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
    <!--添加用戶-->
    <el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%">
      <el-form
          :model="addManagerForm"
          ref="addManagerFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="ID" prop="id" v-if="show">
          <el-input v-model="addManagerForm.id"></el-input>
        </el-form-item>
        <el-form-item label="用戶名" prop="name">
          <el-input v-model="addManagerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addManagerForm.password"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="cellphone">
          <el-input v-model="addManagerForm.cellphone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addManagerForm.email"></el-input>
        </el-form-item>

        <el-form-item label="角色" prop="role">
          <el-select v-model="userRoleList" multiple placeholder="请选择角色">
            <el-option :label="item.name" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否锁定" prop="locked">
          <el-select v-model="addManagerForm.locked" placeholder="请选择是否锁定账户">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addManager">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--修改用戶-->
    <el-dialog
        title="修改用戶"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editManagerFormClose"
    >
      <el-form
          :model="editManagerForm"
          ref="editManagerFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="用戶名" prop="name">
          <el-input v-model="editManagerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="cellphone">
          <el-input v-model="editManagerForm.cellphone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editManagerForm.email"></el-input>
        </el-form-item>

        <el-form-item label="角色" prop="role">
          <el-select v-model="userRoleList" multiple placeholder="请选择角色">
            <el-option :label="item.name" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否锁定" prop="locked">
          <el-select v-model="editManagerForm.locked" placeholder="请选择是否锁定账户">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editManager">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show:false,
      editDialogVisible: false,
      addDialogVisible: false,
      pageNum: 1,
      pageSize: 6,
      managerList: [],
      roleList: [], //系统中所有的角色
      userRoleList: [], //用户拥有的角色
      total: 9,
      name:"",
      addManagerForm: {
        name: "",
        password: "",
        locked: "",
        roleIds: "",
        email: "",
        cellphone: ""
      },
      editManagerForm: {
        id: -1,
        name: "",
        password: "",
        locked: "",
        roleIds: "",
        email: "",
        cellphone: ""
      },
    };
  },
  methods: {
    async removeUserById(id) {
      if (confirm("确认删除吗？")) {
        let url = this.$baseUrl.baseUrl + "manager/removeManager/" + id;
        this.$axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            alert(res.data.msg);
            this.getManagerList();
          } else {
            alert(res.data.msg);
          }
        })
      }
    },
    showEditDialog(row) {
      //打开编辑框
      this.editDialogVisible = true ;
      this.editManagerForm = row
      let arr = row.roleList;
      if (arr != null && arr.length > 0){
        for(let r of arr){
          this.userRoleList.push(r.id);
        }
      }
    },
    //编辑管理员
    editManager() {
      //进行修改数据
      let url = this.$baseUrl.baseUrl + "manager/modifyManager"
      //获取选中的所有的角色ID 封装到 editUserForm 中的roleIds 属性上
      this.editManagerForm.roleIds = this.userRoleList.join(",");

      this.$axios.put(url,{
        id:this.editManagerForm.id,
        name:this.editManagerForm.name,
        email:this.editManagerForm.email,
        cellphone:this.editManagerForm.cellphone,
        locked:this.editManagerForm.locked,
        roleIds:this.editManagerForm.roleIds
      }).then(res=>{
        if (res.data.code == 200)  {
          alert(res.data.msg);
          this.editDialogVisible = false;
          this.userRoleList = [];
          this.editManagerForm.roleIds = "";
          this.getManagerList();
        }else {
          alert(res.data.msg);
        }
      })
    },
    editManagerFormClose() {
      this.userRoleList = [];
      this.editManagerForm.roleIds = "";
    },
    //添加管理员
    addManager() {
      //进行添加数据
      let url = this.$baseUrl.baseUrl + "manager/addManager"
      //获取选中的所有的角色ID 封装到 addUserForm 中的roleIds 属性上
      this.addManagerForm.roleIds = this.userRoleList.join(",");

      this.$axios.post(url,{
        id:this.addManagerForm.id,
        name:this.addManagerForm.name,
        password:this.addManagerForm.password,
        email:this.addManagerForm.email,
        cellphone:this.addManagerForm.cellphone,
        locked:this.addManagerForm.locked,
        roleIds:this.addManagerForm.roleIds
      }).then(res=>{
        if (res.data.code == 200)  {
          alert(res.data.msg);
          this.$refs.addManagerFormRef.resetFields();
          this.userRoleList = [];
          this.addDialogVisible = false;
          this.getManagerList();
        }else {
          alert(res.data.msg);
        }
      })
    },
    getManagerList() {
      let url = this.$baseUrl.baseUrl + "manager/managerList";
      this.$axios.get(url, {
        params: {
          name: this.name,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then((res) => {
        this.managerList = res.data.data.list;
        this.pageNum = res.data.data.pageNum;
        this.pageSize = res.data.data.pageSize;
        this.total = res.data.data.total;
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getManagerList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getManagerList();
    },
    //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
    getRoleNames(arr) {
      if (!arr) return;
      let roleNameArr = new Array();
      for (let i = 0; i < arr.length; i++) {
        roleNameArr.push(arr[i].name);
      }
      return roleNameArr.join(",");
    },
    
    getAllRoles(){
      let url = this.$baseUrl.baseUrl + "role/allRoles"
      this.$axios.get(url)
          .then(res=>{
            if (res.data.code == 200){
              this.roleList = res.data.data;
            }else {
              alert(res.data.msg)
            }
          })
    },
    reloadData() {
      
    }
  },
  created() {
    this.getManagerList();
    this.getAllRoles();
  }
};
</script>
<style lang="less" scoped>
</style>